<template>
  <div class="back">
    <div :class="bodyTitle">
      <div class="body-header">{{ title }}</div>
      <div class="body-main">
        <div class="body-main-form">
          <div class="flexBody row">
            <div class="left col line40">业主单位</div>
            <div class="right col">
              <el-select
                v-model="selectOneValue"
                filterable
                clearable
              >
                <el-option
                  v-for="(item, index) in selectOne"
                  :key="index"
                  :label="item.name"
                  :value="item.pkid"
                />
              </el-select>
            </div>
          </div>

          <div class="flexBody row">
            <div class="left col line40">项目名称</div>
            <div class="right col">
              <el-select
                v-model="selectTwoValue"
                filterable
                clearable
              >
                <el-option
                  v-for="(item, index) in selectTwo"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </div>
          </div>

          <div class="flexBody row">
            <div class="left col line40">
              业主单位联系人
            </div>
            <div class="right col">
              <el-input v-model="formArr[2].fieldValue" />
            </div>
          </div>

          <div class="flexBody row">
            <div class="left col line40">
              业主单位联系方式
            </div>
            <div class="right col">
              <el-input v-model="formArr[3].fieldValue" />
            </div>
          </div>
          <div class="flexBody row">
            <div class="left col line40">填报人</div>
            <div class="right col">
              <el-input v-model="formArr[4].fieldValue" />
            </div>
          </div>
          <div class="flexBody row">
            <div class="left col line40">
              填报人联系电话
            </div>
            <div class="right col">
              <el-input v-model="formArr[5].fieldValue" />
            </div>
          </div>
          <div class="flexBody row">
            <div class="left col line40">
              管理人员数量(人)
            </div>
            <div class="right col">
              <el-input v-model="manageNumber" />
            </div>
          </div>
          <div class="flexBody row">
            <div class="left col line40">
              作业人数数量(人)
            </div>
            <div class="right col">
              <el-input v-model="workNumber" />
            </div>
          </div>
          <div class="flexBody row">
            <div class="left col line40">总人数(人)</div>
            <div class="right col">
              <el-input v-model="allNumber" disabled />
            </div>
          </div>
          <div class="flexBody row">
            <div class="left col line40">
              应接种人数(人)
            </div>
            <div class="right col">
              <el-input v-model="formArr[9].fieldValue" />
            </div>
          </div>
          <div class="flexBody row">
            <div class="left col line40">
              已接种第一剂人数(人)
            </div>
            <div class="right col">
              <el-input v-model="vaccinOneNumber" />
            </div>
          </div>
          <div class="flexBody row">
            <div class="left col line40">
              其中接种腺病毒疫苗人数(人)
            </div>
            <div class="right col">
              <el-input v-model="formArr[11].fieldValue" />
            </div>
          </div>
          <div class="flexBody row">
            <div class="left col line40">
              已接种第二剂人数(人)
            </div>
            <div class="right col">
              <el-input v-model="formArr[12].fieldValue" />
            </div>
          </div>
          <div class="flexBody row">
            <div class="left col line40">
              已接种第三剂人数(人)[非加强针]
            </div>
            <div class="right col">
              <el-input v-model="formArr[13].fieldValue" />
            </div>
          </div>
          <div class="flexBody row">
            <div class="left col line40">
              完成接种人数(人)
            </div>
            <div class="right col">
              <el-input v-model="formArr[14].fieldValue" />
            </div>
          </div>
          <div class="flexBody row">
            <div class="left col line40">
              加强针接种人数(人)
            </div>
            <div class="right col">
              <el-input v-model="formArr[15].fieldValue" />
            </div>
          </div>
          <div class="flexBody row">
            <div class="left col line40">
              未接种人数(人)
            </div>
            <div class="right col">
              <el-input disabled v-model="noVaccinNumber" />
            </div>
          </div>
          <div class="flexBody row">
            <div class="left line80 col">未接种原因</div>
            <div class="left">
              <div class="col line40">有禁忌症(人)</div>
              <div class="col line40">尚未安排(人)</div>
              <div class="col line40">其他原因(人)</div>
            </div>
            <div class="right">
              <el-input
                class="col"
                v-model="formArr[17].fieldValue"
              />
              <el-input
                class="col"
                v-model="formArr[18].fieldValue"
              />
              <el-input
                class="col"
                v-model="formArr[19].fieldValue"
              />
            </div>
          </div>
          <el-row
            class="rowTwo"
            v-for="(item, index) in formArrTextarea"
            :key="index"
          >
            <div class="textarea_inner">
              {{ item.fieldName }}
            </div>
            <el-input v-model="item.fieldValue" />
          </el-row>
        </div>
      </div>
      <div class="body-foot">
        <div class="body-foot-button" @click="onSumbit">
          提交
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getProjectSelect,
  getSelect,
  getInfo,
  postSave
} from '@/api/wisdomBuild'

export default {
  name: 'detail',
  data() {
    return {
      formArr: [
        {
          fieldName: '业主单位',
          sort: 1
        },
        {
          fieldName: '项目名称',
          sort: 2
        },
        {
          fieldName: '业主单位联系人',
          sort: 3
        },
        {
          fieldName: '业主单位联系方式',
          sort: 4
        },
        {
          fieldName: '填报人',
          sort: 5
        },
        {
          fieldName: '填报人联系电话',
          sort: 6
        },
        {
          fieldName: '管理人员数量(人)',
          sort: 7
        },
        {
          fieldName: '作业人员数量(人)',
          sort: 8
        },
        {
          fieldName: '总人数(人)',
          sort: 9
        },
        {
          fieldName: '应接种人数(人)',
          sort: 10
        },
        {
          fieldName: '已接种第一剂人数(人)',
          sort: 11
        },
        {
          fieldName: '其中接种腺病毒疫苗人数(人)',
          sort: 12
        },
        {
          fieldName: '已接种第二剂人数(人)',
          sort: 13
        },
        {
          fieldName: '已接种第三剂人数(人)[非加强针]',
          sort: 14
        },
        {
          fieldName: '完成接种人数(人)',
          sort: 15
        },
        {
          fieldName: '加强针接种人数(人)',
          sort: 16
        },
        {
          fieldName: '未接种人数(人)',
          sort: 17
        },
        {
          fieldTitle: '未接种原因',
          fieldName: '有禁忌症(人)',
          sort: 18
        },
        {
          fieldTitle: '未接种原因',
          fieldName: '尚未安排(人)',
          sort: 19
        },
        {
          fieldTitle: '未接种原因',
          fieldName: '其他原因(人)',
          sort: 20
        }
      ],
      formArrTextarea: [],
      selectOne: [],
      selectOneValue: '',
      selectTwo: [],
      selectTwoValue: '',
      taskPkid: '',
      manageNumber: '',
      workNumber: '',
      vaccinOneNumber: '',
      title: '',
      bodyTitle: ''
    }
  },
  watch: {
    selectOneValue(val) {
      console.log(val)
      // if (!val) {
      //   this.selectTwoValue = ''
      // }
      this.selectTwo = []
      this.selectTwoValue = ''
      this.select(val)
    }
  },
  computed: {
    allNumber() {
      return this.workNumber * 1 + this.manageNumber * 1
    },
    noVaccinNumber() {
      return this.allNumber * 1 - this.vaccinOneNumber * 1
    }
  },
  mounted() {
    document.title = '疫情防控'
    const windowWidth = document.body.offsetWidth
    console.log(windowWidth, 'width')
    if (windowWidth >= 1024) {
      this.bodyTitle = 'bodyPC'
    } else {
      this.bodyTitle = 'body'
    }
    this.formArrTextarea = []
    this.taskPkid = this.$route.query.pkid
    getInfo({
      taskPkid: this.taskPkid
    }).then((res) => {
      this.formArr = []
      if (res.success) {
        this.title = res.data.title
        res.data.template.map((item) => {
          if (item.sort >= 21) {
            this.formArrTextarea.push({
              fieldName: item.fieldName,
              templatePkid: item.pkid,
              fieldValue: ''
            })
          } else {
            if (item.sort) {
              this.formArr.push({
                templatePkid: item.pkid,
                fieldValue: ''
              })
            } else {
              item.array.map((items) => {
                this.formArr.push({
                  templatePkid: items.pkid,
                  fieldValue: ''
                })
              })
            }
          }
        })
      }
    })
    getSelect().then((res) => {
      if (res.success) {
        this.selectOne = res.data
        console.log(this.selectOne, 'this.selectOne')
      }
    })
  },
  methods: {
    select(id) {
      getProjectSelect({ unitPkid: id }).then((res) => {
        if (res.success) {
          this.selectTwo = res.data
        }
      })
    },
    // 提交
    onSumbit() {
      if (!this.selectOneValue) {
        this.$message.error('请选择业主单位')
        return
      }
      if (!this.selectTwoValue) {
        this.$message.error('请选择项目')
        return
      }
      this.formArr[0].fieldValue = this.selectOne.filter(
        (item) => item.pkid === this.selectOneValue
      )[0].name
      this.formArr[1].fieldValue = this.selectTwoValue
      this.formArr[6].fieldValue = this.manageNumber
      this.formArr[7].fieldValue = this.workNumber
      this.formArr[8].fieldValue = this.allNumber
      this.formArr[10].fieldValue = this.vaccinOneNumber
      this.formArr[16].fieldValue = this.noVaccinNumber + ''

      const arrText = JSON.parse(
        JSON.stringify(this.formArrTextarea)
      )
      arrText.forEach((item) => {
        item = {
          templatePkid: item.templatePkid,
          fieldValue: item.fieldValue
        }
      })
      const allArr = this.formArr.concat(arrText)
      // const noNull = allArr.filter((item) => {
      //   if (!item.fieldValue) {
      //     return item
      //   }
      // })
      postSave({
        taskPkid: this.taskPkid,
        status: 1,
        recordsDataList: allArr
      }).then((res) => {
        if (res.success) {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: '<h1>感谢您的填写</h1>',
            center: true,
            type: 'success',
            offset: 260
          })
          setTimeout(() => {
            const ua =
              window.navigator.userAgent.toLowerCase()
            if (
              ua.match(/MicroMessenger/i) ===
              'micromessenger'
            ) {
              // 是否是微信端
              WeixinJSBridge.call('closeWindow') // 微信端关闭浏览器
            } else {
              // 正常浏览器关闭
              window.opener = null
              window.close()
            }
          }, 3000) // 延迟一秒关闭浏览器
        } else {
          this.$message.error(res.message)
        }
      })

      // if (
      //   Number(this.formArr[9].fieldValue) ===
      //   this.allNumber - this.formArr[17].fieldValue
      // ) {
      //   if (
      //     this.formArr[10].fieldValue >=
      //     this.formArr[12].fieldValue
      //   ) {
      //     if (
      //       this.formArr[12].fieldValue >=
      //       this.formArr[13].fieldValue
      //     ) {
      //       if (
      //         this.formArr[13].fieldValue >=
      //         this.formArr[15].fieldValue
      //       ) {
      //         const arrText = JSON.parse(
      //           JSON.stringify(this.formArrTextarea)
      //         )
      //         arrText.forEach((item) => {
      //           item = {
      //             templatePkid: item.templatePkid,
      //             fieldValue: item.fieldValue
      //           }
      //         })
      //         const allArr = this.formArr.concat(arrText)
      //         const noNull = allArr.filter((item) => {
      //           if (!item.fieldValue) {
      //             return item
      //           }
      //         })
      //         if (!noNull.length) {
      //           postSave({
      //             taskPkid: this.taskPkid,
      //             status: 1,
      //             recordsDataList: allArr
      //           }).then((res) => {
      //             if (res.success) {
      //               this.$message({
      //                 dangerouslyUseHTMLString: true,
      //                 message: '<h1>感谢您的填写</h1>',
      //                 center: true,
      //                 type: 'success',
      //                 offset: 260
      //               })
      //               setTimeout(() => {
      //                 const ua =
      //                   window.navigator.userAgent.toLowerCase()
      //                 if (
      //                   ua.match(/MicroMessenger/i) ===
      //                   'micromessenger'
      //                 ) {
      //                   // 是否是微信端
      //                   WeixinJSBridge.call('closeWindow') // 微信端关闭浏览器
      //                 } else {
      //                   // 正常浏览器关闭
      //                   window.opener = null
      //                   window.close()
      //                 }
      //               }, 3000) // 延迟一秒关闭浏览器
      //             } else {
      //               this.$message.error(res.message)
      //             }
      //           })
      //         } else {
      //           this.$message.error(
      //             '您有未填写内容，请检查'
      //           )
      //         }
      //       } else {
      //         console.log('错误4')
      //         this.$message.error(
      //           '第一针人数≥第二针人数≥第三针人数≥加强针人数'
      //         )
      //       }
      //     } else {
      //       console.log('错误3')
      //       this.$message.error(
      //         '第一针人数≥第二针人数≥第三针人数≥加强针人数'
      //       )
      //     }
      //   } else if (
      //     this.formArr[10].fieldValue <
      //     this.formArr[14].fieldValue
      //   ) {
      //     this.$message.error(
      //       '完成接种人数（人）≤已接种第一针人数（人）'
      //     )
      //   } else {
      //     console.log('错误2')
      //     this.$message.error(
      //       '第一针人数≥第二针人数≥第三针人数≥加强针人数'
      //     )
      //   }
      // } else {
      //   console.log('错误1')
      //   this.$message.error(
      //     '应接种人数=总人数-因接种禁忌不能接种的人数'
      //   )
      // }
    }
  }
}
</script>

<style scoped lang="scss">
.back {
  width: 100%;
  height: 100vh;
  background: #f4f8fe;
}

.body {
  width: 100%;
  height: 100vh;
  padding: 10px 10px;
  background: white;
  //background: rgba(25, 47, 61, 0.7);

  .body-header {
    width: 100%;
    height: 5vh;
    text-align: center;
    color: #000;
    font-size: 22px;
    font-family: PingFang SC;
    font-weight: 500;
  }
  .body-main {
    .body-main-form {
      width: 100%;
      height: 84vh;
      overflow-y: auto;

      .flexBody {
        display: flex;

        .left {
          flex: 1;
          background: #f6f9fb;
        }

        .right {
          flex: 2;
        }
      }

      .row {
        border-left: 1px solid #cad4de;
        border-top: 1px solid #cad4de;
        color: #000;
        font-weight: 500;
      }

      //
      .rowTwo {
        border-left: 1px solid #cad4de;
        border-right: 1px solid #cad4de;
        border-bottom: 1px solid #cad4de;
        color: #000;
        font-weight: 500;
      }

      .col {
        border-right: 1px solid #cad4de;
        border-bottom: 1px solid #cad4de;
        font-size: 14px;
        padding-left: 5px;
        font-weight: 500;
      }

      .line40 {
        //height: 41px;
        line-height: 40px;
      }

      .line {
        height: 41px;
      }

      .line80 {
        line-height: 122px;
      }
    }
  }
  .body-foot {
    width: 100%;
    height: 7vh;
    margin-top: 1vh;
    display: flex;

    .body-foot-button {
      margin: 0 auto;
      width: 50vw;
      height: 5vh;
      border-radius: 5px;
      line-height: 5vh;
      background: #00d2ff;
      text-align: center;
      //color: black;
    }
  }
}

.bodyPC {
  width: 900px;
  height: 100vh;
  padding: 10px 80px;
  background: white;
  //background: rgba(25, 47, 61, 0.7);
  margin: 0 auto;

  .body-header {
    width: 100%;
    height: 7vh;
    text-align: center;
    color: #000;
    font-size: 30px;
    font-family: PingFang SC;
    font-weight: 500;
  }
  .body-main {
    .body-main-form {
      width: 100%;
      height: 84vh;
      overflow-y: auto;

      .flexBody {
        display: flex;

        .left {
          flex: 1;
          background: #f6f9fb;
        }

        .right {
          flex: 2;
        }
      }

      .row {
        border-left: 1px solid #cad4de;
        border-top: 1px solid #cad4de;
        color: #000;
        font-weight: 500;
      }

      //
      .rowTwo {
        border-left: 1px solid #cad4de;
        border-right: 1px solid #cad4de;
        border-bottom: 1px solid #cad4de;
        color: #000;
        font-weight: 500;
      }

      .col {
        border-right: 1px solid #cad4de;
        border-bottom: 1px solid #cad4de;
        font-size: 14px;
        padding-left: 5px;
        font-weight: 500;
      }

      .line40 {
        line-height: 40px;
      }

      .line80 {
        line-height: 122px;
      }
    }
  }
  .body-foot {
    width: 100%;
    height: 7vh;
    margin-top: 1vh;
    display: flex;

    .body-foot-button {
      margin: 0 auto;
      width: 156px;
      height: 5vh;
      line-height: 5vh;
      background: #00d2ff;
      text-align: center;
      //color: black;
    }
  }
}

.bodyPC ::v-deep {
  .body-header {
    .el-button {
      float: right;
      background: #089bde !important;
      color: #000;
      width: 70px;
      border: none !important;
    }
  }

  .body-main {
    .el-form {
      .el-form-item__label {
        color: #000;
      }
    }

    .el-select {
      width: 100%;
    }

    .el-input__inner {
      background: rgba(92, 106, 116, 0.5);
      width: 100%;
      border: none !important;
      color: #000 !important;
      font-weight: 500;
    }

    &-form {
      .el-input__inner {
        background: rgba(255, 255, 255, 0) !important;
      }

      .textarea_inner {
        border-bottom: 1px solid #cad4de !important;
        padding: 10px 5px;
        background: #f6f9fb;
        color: #000;
        font-weight: 500;
        font-size: 14px;
      }
    }
  }
}

.body ::v-deep {
  .body-header {
    .el-button {
      float: right;
      background: #089bde !important;
      color: white;
      width: 70px;
      border: none !important;
    }
  }

  .body-main {
    .el-form {
      .el-form-item__label {
        color: #000;
      }
    }

    .el-select {
      width: 100%;
    }

    .el-input__inner {
      background: rgba(92, 106, 116, 0.5);
      width: 100%;
      border: none !important;
      color: #000 !important;
      -webkit-user-select: auto;
    }

    &-form {
      .el-input__inner {
        background: rgba(255, 255, 255, 0) !important;
        -webkit-user-select: auto;
      }

      .textarea_inner {
        border-bottom: 1px solid #cad4de !important;
        background: #f6f9fb;
        color: #000;
        -webkit-user-select: auto;
      }
    }
  }
}
</style>
